<template>
	<scroll-view class="container" enable-flex="true">
		<!--header-->
		<view class="tui-header-box" :style="{ height: height + 'px', background: 'rgba(255,255,255,' + opcity + ')' }">
			<view class="tui-header" :style="{ paddingTop: top + 'px', opacity: opcity }">{{topic.title}}</view>
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<view class="tui-icon-box" :style="{ backgroundColor: 'rgba(0, 0, 0,' + iconOpcity + ')' }" @tap="back">
					<tui-icon name="arrowleft" :size="30" :color="opcity >= 1 ? '#000' : '#fff'"></tui-icon>
				</view>
			</view>
		</view>
		<!--header-->
		<scroll-view class="content">
			<uParse :content="topic.content" noData=" " />
		</scroll-view>
		<view class="topic-goods">
		</view>
		<scroll-view class="rec-box">
			<view class="h">
				<text class="txt">文章推荐</text>
			</view>
			<view class="b">
				<navigator class="item" v-for="(item, index) in topicList" :key="index" :url="'../topicDetail/topicDetail?id='+item.id">
					<image class="img" :src="item.scenePicUrl"></image>
					<text class="title">{{item.title}}</text>
				</navigator>
			</view>
		</scroll-view>
	</scroll-view>
</template>

<script>
	const app = getApp()
	const util = require("@/utils/util.js")
	import uParse from '@/components/uni/u-parse/u-parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				id: 0,
				height: 64, //header高度
				top: 0, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,
				topic: {},
				topicList: [],
				commentCount: 0,
				commentList: []
			}
		},
		methods: {
			back: function() {
				uni.navigateBack({
					fail() {
						uni.switchTab({
							url: '/pages/index/index',
						})
					}
				})
			},
			getCommentList() {
				let that = this;
				util.request('comment/list', {
					orderId: that.id,
					type: 1,
					size: 5,
					showType: 0
				}).then(function(res) {
					if (res.code === 0) {
						that.commentList = res.data.records
						that.commentCount = res.data.total
					}
				});
			},
			postComment() {
				let that = this;
				uni.navigateTo({
					url: '/pages/commentPost/commentPost?orderId=' + that.id + '&type=1',
				})
			}
		},
		onShow: function() {
			this.getCommentList();
		},
		onShareAppMessage: function() {
			var that = this;
			return {
				title: that.topic.title,
				desc: that.topic.subtitle,
				path: '/pages/topicDetail/topicDetail?id=' + that.topic.id
			}
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			var that = this;
			that.id = options.id

			util.request('topic/detail', {
				id: that.id
			}).then(function(res) {
				if (res.code === 0) {
					that.topic = res.data
				}
			});

			util.request('topic/related', {
				id: that.id
			}).then(function(res) {
				if (res.code === 0) {
					that.topicList = res.data.records
				}
			});
			
			this.width = app.globalData.customBar.width
			this.height = app.globalData.customBar.height
			this.top = app.globalData.customBar.top
			this.scrollH = app.globalData.customBar.scrollH
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / this.scrollH;
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.opcity = opcity;
			this.iconOpcity = 0.5 * (1 - opcity < 0 ? 0 : 1 - opcity);
		}
	}
</script>

<style>
	
	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9998;
	}
	
	.tui-header {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 600;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-header-icon {
		position: fixed;
		left: 10px;
		top: 0;
		display: flex;
		align-items: flex-start;
		height: 32px;
		transform: translateZ(0);
		z-index: 99999;
	}
	
	.tui-icon-box {
		position: relative;
		height: 20px !important;
		width: 20px !important;
		padding: 6px !important;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.content {
		width: 100%;
		height: auto;
		font-size: 0;
	}

	.content image {
		display: inline-block;
		width: 100%;
	}

	.rec-box {
		width: 690rpx;
		height: auto;
		margin: 0 30rpx;
	}

	.rec-box .h {
		width: 690rpx;
		height: 96rpx;
		/*border-bottom: 1px solid #d0d0d0;*/
		margin-bottom: 32rpx;
	}

	.rec-box .h .txt {
		display: inline-block;
		position: absolute;
		background: #f4f4f4;
		top: 59rpx;
		left: 200rpx;
		width: 290rpx;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 30rpx;
		color: #999;
		text-align: center;
	}

	.rec-box .b .item {
		width: 690rpx;
		height: 397rpx;
		padding: 24rpx 24rpx 30rpx 24rpx;
		background: #fff;
		margin-bottom: 30rpx;
	}

	.rec-box .b .item .img {
		height: 278rpx;
		width: 642rpx;
	}

	.rec-box .b .item .title {
		display: block;
		margin-top: 30rpx;
		height: 30rpx;
		width: 642rpx;
		font-size: 28rpx;
	}
</style>
